<template>
  <div>
    <div class="table-page-search-wrapper">
      <div style="display: inline-block">
        <a-button
          type="primary"
          icon="plus"
          @click="handleAdd"
          @ok="loadData(true)"
        >
          添加
        </a-button>
        <!-- <a-button
          type="primary"
          icon="cloud"
          @click="sync"
          style="margin-left: 8px"
        >
          同步
        </a-button> -->
      </div>

      <div style="display: inline-block; width: 75%; float: right">
        <a-form-model
          ref="formModel"
          :model="form"
          layout="inline"
          :rules="{
            name: [
              {
                validator: validators.noWhitespace(),
                trigger: 'change',
              },
              {
                validator: validators.noIllegalString(),
                trigger: 'change',
              },
              {
                max: 10,
                message: '长度在 1 到 10 个字符',
                trigger: 'change',
              },
            ],
          }"
        >
          <a-row :gutter="[16, 16]" type="flex" justify="end">
            <a-col :span="8">
              <a-form-model-item prop="name" label="资源名称">
                <a-input autocomplete="off" v-model="form.name"></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item prop="type" label="资源类型">
                <a-select
                  :getPopupContainer="
                    (triggerNode) => {
                      return triggerNode.parentNode || document.body;
                    }
                  "
                  v-model="form.type"
                >
                  <a-select-option
                    v-for="d in typeList"
                    :key="d.value"
                    :value="d.value"
                  >
                    {{ d.name }}
                  </a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
            <span
              style="float: left; overflow: hidden"
              class="table-page-search-submitButtons"
            >
              <a-col :span="8">
                <a-button type="primary" @click="loadData(true)" icon="search">
                  查询
                </a-button>
                <a-button
                  @click="resetSearchForm"
                  icon="reload"
                  style="margin-left: 8px"
                >
                  重置
                </a-button>
              </a-col>
            </span>
          </a-row>
        </a-form-model>
      </div>
    </div>

    <!-- <div style="margin-left: 90px;color: rgba(0, 0, 0, 0.45);margin-bottom: 5px">
      请先同步IT设备
    </div> -->

    <a-table
      ref="table"
      rowKey="id"
      size="middle"
      :columns="columns"
      :dataSource="gDataSource"
      :pagination="gPagination"
      @change="gHandleTableChange"
    >
      <span slot="sortCol" slot-scope="text, record, index">
        {{
          (gPagination.current - 1) * gPagination.pageSize + parseInt(index) + 1
        }}
      </span>
      <span slot="action" slot-scope="text, record">
        <a-button
          type="primary"
          icon="edit"
          size="small"
          @click="handleEdit(record)"
          >编辑</a-button
        >
        <a-divider type="vertical" />
        <a-button
          type="primary"
          icon="profile"
          size="small"
          @click="handleDetail(record)"
          >详情</a-button
        >
        <a-divider type="vertical" />
        <a-button
          type="danger"
          icon="delete"
          size="small"
          @click="handleDel(record)"
          >删除</a-button
        >
        <!-- <a-popconfirm title="确定删除吗?" @confirm="() => handleDel(record)">
        </a-popconfirm> -->
      </span>
    </a-table>

    <add-modal ref="addModal" @ok="loadData(true)" />
    <edit-modal ref="editModal" @ok="loadData(true)" />
    <detail-modal ref="detailModal" />
  </div>
</template>

<script>
import { GwListMixin } from "@/mixins/GwListMixin";
import { gPostAction, getAction } from "@/api/manage";
import AddModal from "./modules/node/AddModal";
import EditModal from "./modules/node/EditModal";
import DetailModal from "./modules/node/DetailModal";

export default {
  name: "Node",
  mixins: [GwListMixin],
  components: { AddModal, EditModal, DetailModal },
  data() {
    return {
      // 表头
      columns: [
        {
          title: "序号",
          dataIndex: "",
          key: "rowIndex",
          width: 50,
          scopedSlots: { customRender: "sortCol" },
        },
        {
          title: "资源名称",
          width: 200,
          dataIndex: "name",
        },
        {
          title: "资源类型",
          dataIndex: "typeName",
        },
        // {
        //   title: "资源所属服务器",
        //   dataIndex: "server",
        //   customRender: function (t, r, index) {
        //     return r.type === 0 ? r.zoneName || r.zoneId || "" : "";
        //   },
        // },
        {
          title: "数据中心",
          dataIndex: "datacenterName",
        },
        {
          title: "操作",
          width: 250,
          dataIndex: "action",
          scopedSlots: { customRender: "action" },
        },
      ],
      form: {
        name: "",
        type: "",
      },
      typeList: [
        {
          name: "全部",
          value: "",
        },
        {
          name: "容器",
          value: 1,
        },
        {
          name: "阿里云",
          value: 2,
        },
        {
          name: "华为云",
          value: 3,
        },
      ],
    };
  },
  mounted() {
    this.loadData();
  },
  methods: {
    sync() {
      getAction("/cloud_resource/sync", {}).then((res) => {
        if (res.success) {
          this.loadData(true);
          this.$message.success(res.data || "同步成功");
        }
      });
    },
    loadData(isDoSearch) {
      this.$refs.formModel.validate((error) => {
        if (!error) {
          return;
        }
        this.gQueryParam.type = this.form.type;
        this.gQueryParam.name = this.form.name;
        if (isDoSearch) {
          this.gQueryParam.pageNo = 1;
          this.gPagination.current = 1;
        }
        this.gQueryParam.title =
          "精确管控与供电制冷联动-基础资源细粒度感知-资源管理-L3层：云平台资源";
        gPostAction("/cloud_resource/page", this.gQueryParam).then((res) => {
          if (res.success) {
            const data = res.data;
            if (data && data.list) {
              this.gDataSource = data.list;
              this.gPagination.total = data.totalCount;
            }
          }
        });
      });
    },
    handleAdd() {
      this.$refs.addModal.add();
    },
    handleEdit(item) {
      this.$refs.editModal.edit(item);
    },
    handleDel(item) {
      const that = this;
      this.$confirm({
        title: "提示",
        content: "确定删除【" + item.name + "】吗 ?",
        onOk() {
          const postData = {
            id: item.id,
            title:
              "精确管控与供电制冷联动-基础资源细粒度感知-资源管理L3层-云平台资源",
          };
          gPostAction("/cloud_resource/delete", postData).then((res) => {
            if (res.success) {
              that.$message.success("操作成功");
              that.deleteCallBack();
            }
          });
        },
        onCancel() {},
      });
    },
    handleDetail(data) {
      this.$refs.detailModal.detail(data);
    },
    resetSearchForm() {
      this.form.name = "";
      this.form.type = "";
      this.$refs.formModel.resetFields();
    },
  },
};
</script>
